<template>
  <el-drawer
      :title="'订单详情'"
      :visible="visible"
      size="80vw"
      @close="closeDialog"
      append-to-body
    >
    <div style="padding:20px">
      
      <div class="avue-crud">
        <div>
          <h5 class="form-title-1">商品信息</h5>
        </div>
        <el-table :data="dataForm.skuDetails" border>
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="skuShortName"
            header-align="center"
            align="center"
            label="sku简称">
            <template slot-scope="{row}">
              <span v-if="dataForm.orderType == orderTypeEnum.sku">{{ row.skuShortName }}</span>
              <span v-else-if="dataForm.orderType == orderTypeEnum.equity">{{ row.skuName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="canningCount"
            header-align="center"
            align="center"
            label="罐装数量">
          </el-table-column>
          <el-table-column
            prop="bagCount"
            header-align="center"
            align="center"
            label="袋装数量">
          </el-table-column>
          <el-table-column
            prop="stripCount"
            header-align="center"
            align="center"
            label="条装数量">
          </el-table-column>
          <el-table-column
            prop="sellPrice"
            header-align="center"
            align="center"
            label="销售价格"
            :formatter="formatMoney">
          </el-table-column>
          <!-- <el-table-column
            prop="point"
            header-align="center"
            align="center"
            label="积分">
          </el-table-column>
          <el-table-column
            prop="firstProfit"
            header-align="center"
            align="center"
            label="一级分润"
            :formatter="formatMoney">
          </el-table-column>
          <el-table-column
            prop="secondProfit"
            header-align="center"
            align="center"
            label="二级分润"
            :formatter="formatMoney">
          </el-table-column> -->
        </el-table>
      </div>

      <div class="avue-crud" style="margin-top: 20px">
        <div>
          <h5 class="form-title-1">赠品信息</h5>
        </div>

        <el-table :data="dataForm.giftDetails" border>
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="giftName"
            header-align="center"
            align="center"
            label="赠品名称">
          </el-table-column>
          <el-table-column
            prop="count"
            header-align="center"
            align="center"
            label="赠品数量">
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud" style="margin-top: 20px">
        <h5 class="form-title-1">优惠券信息</h5>
        <el-table :data="dataForm.coupons" border>
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="couponName"
            header-align="center"
            align="center"
            label="优惠券名称">
          </el-table-column>
          <el-table-column
            prop="couponCate"
            header-align="center"
            align="center"
            label="种类"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.couponCate === '1'">用户领取</span>
              <span v-else-if="scope.row.couponCate === '2'">手动发放</span>
              <span v-else-if="scope.row.couponCate === '3'">付费卷</span>
              <span v-else>新人卷</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="couponType"
            header-align="center"
            align="center"
            label="类型">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.couponType === '1'">代金券</el-tag>
              <el-tag v-else>折扣券</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderPrice"
            header-align="center"
            align="center"
            label="满减金额"
            :formatter="formatMoney">
          </el-table-column>
          <el-table-column
            prop="orderPrice"
            header-align="center"
            align="center"
            label="优惠减免"
            width="120px">
            <template slot-scope="scope">
              <template v-if="scope.row.couponType == '1'">
                <span>-</span>
                <span style="margin-left: 5px">{{scope.row.deductionPrice | formatMoneyToYuanFilter}}</span>
              </template>
              <template v-else-if="scope.row.couponType == '2'">
                <span >{{scope.row.discountRate | formatRateFilter}}</span>
                <span style="margin-left: 2px">折</span>
              </template>
              <template v-else>
                <span>未知</span>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud" style="margin-top:20px">
        <h5 class="form-title-1">绑定销售代表信息</h5>
        <el-table :data="dataForm.salesShopUser" border>
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="loginAccount"
            header-align="center"
            align="center"
            label="登录账号">
          </el-table-column>
          <el-table-column
            prop="nickName"
            header-align="center"
            align="center"
            label="昵称">
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud" style="margin-top: 20px">
        <h5 class="form-title-1">买家信息</h5>
        <el-table :data="[dataForm.shopUser]" border>
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="编号">
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="头像"
          >
            <template slot-scope="scope">
              <el-avatar icon="el-icon-user-solid" :src="scope.row.headerUrl"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="loginAccount"
            header-align="center"
            align="center"
            label="登录账号">
          </el-table-column>
          <el-table-column
            prop="nickName"
            header-align="center"
            align="center"
            label="昵称">
          </el-table-column>
          <el-table-column
            prop="realName"
            header-align="center"
            align="center"
            label="真实姓名">
          </el-table-column>
          <el-table-column
            :prop="'shopUserInfo.pointBalance'"
            header-align="center"
            align="center"
            label="积分余额">
          </el-table-column>
          <el-table-column
            :prop="'shopUserInfo.cashBalance'"
            header-align="center"
            align="center"
            label="充值钱包余额">
          </el-table-column>
          <el-table-column
            :prop="'shopUserInfo.profitBalance'"
            header-align="center"
            align="center"
            label="分润钱包余额">
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud" style="margin-top: 20px">
        <h5 class="form-title-1">收货人信息</h5>
        <el-table :data="[dataForm]" border>
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="province"
            header-align="center"
            align="center"
            label="省份">
          </el-table-column>
          <el-table-column
            prop="city"
            header-align="center"
            align="center"
            label="城市">
          </el-table-column>
          <el-table-column
            prop="area"
            header-align="center"
            align="center"
            label="区域">
          </el-table-column>
          <el-table-column
            prop="address"
            header-align="center"
            align="center"
            label="详细地址">
          </el-table-column>
          <el-table-column
            prop="contacts"
            header-align="center"
            align="center"
            label="收货人姓名">
          </el-table-column>
          <el-table-column
            prop="contactNumber"
            header-align="center"
            align="center"
            label="收货人电话">
          </el-table-column>
        </el-table>
      </div>

    </div>


    <!-- <div class="dialog__footer">
      <el-button @click="closeDialog">取 消</el-button>
    </div> -->


  </el-drawer>
</template>

<script>
import {getObj} from '@/api/shop_order/order';
import {orderTypeEnum} from '@/const/const';
export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return{
      orderTypeEnum,
      dataForm:{
        skuDetails:[],
        coupons:[],
        shopUser:{}
      }
    }
  },
  methods:{

    /**
     * 初始化
     */
    init(orderId){
      if(orderId){
        getObj(orderId).then(res=>{
          let data = res.data.data
          if(data.salesShopUser){
              this.$set(data, 'salesShopUser', [data.salesShopUser])
            } else {
              data.salesShopUser = []
            }
          this.dataForm = data
        })
      }
    },

     //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style lang="scss" scoped>

.dialog__footer {
  display: block;
  padding: 10px 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid #f0f0f0;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #fff;
  text-align: right;
}

.form-title-1 {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 0 0 18px 0;

  &:before {
    content: '';
    display: block;
    width: 4px;
    height: 16px;
    background: #4193ff;
    margin-right: 10px;
  }
}
</style>